<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      MoleMash2 - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c4 {border-width:0}
    th.c3 {font-size:16px}
    img.c2 {padding: 10px;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis  Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; MoleMash2 &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Mole Mash 2
              </h1>
              <h2>
                Que estás constryendo
              </h2><img align="right" alt="The game running on an emulator" class="c2" src="front-pic.png" width="230">
              <p>
                Este tutorial te muestra como construir in juego similar al arcade Whac-A-MoleTM. Especificamente, tu objetivo es alcanzar a un topo que aparece aleatoriamente en uno de cinco hoyos fijados. Cada vez que lo logres, tu puntuación se incrementará en un punto.
              </p>
              <p>
                Con el fin de poner de relieve las nuevas funciones de App Inventor —la ficha opciones Avanzadas y las capas Z para los Sprites— esta aplicación tiene un enfoque diferente al <a href="../molemash/molemash.html">tutorial original de Mole Mash</a>, el cual no es necesario haber realizado con el fin de hacer este. Debes, de todos modos, estar familiarizado con los fundamentos de App Inventor — el uso del Diseñador de componentes para construir una interfaz de usuario y uso del Editor de bloques para especificar controladores de eventos. Si no estás familiarizado con los conceptos básicos, trata de realizar algunos de los <a href="../index.html">tutoriales basicos</a> antes de continuar.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Este tutorial incluye:
              </p>
              <ol>
                <li>Creación de una lista de los componentes
                </li>
                <li>El uso de la funcionalidad de la sección Avanzado del Editor de bloques para obtener y establecer propiedades arbitrarias para los componentes
                </li>
                <li>Tener eventos del juego controlados por el componente <span class="ButtonText">Clock</span>
                </li>
                <li>El uso de capas en Z para asegurar que un sprite (<span class="ButtonText">ImageSprite</span> o una <span class="ButtonText">Ball</span>) aparece por delante de otro
                </li>
              </ol>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate a la página web de App Inventor y empieza un nuevo proyecto. Establece la propiedad del título de la pantalla <span class="ButtonText">Title</span> a nombre apropiado, como "Mole Mash". Abre el Editor de bloques y conéctalo al teléfono. Descarga estos archivos de imagen (creados por Yun Miao) haciendo clic derecho sobre ellos, y luego añadelos al proyecto pulsando el botón "Añadir ..." en el panel de medios.
              </p>
              <table cellpadding="5">
                <tr>
                  <td align="center">
                    <img alt="Un agujero para salir el topo" src="hole.png">
                  </td>
                  <td align="center">
                    <img alt="Un topo de aspecto desagradable" src="mole.png">
                  </td>
                </tr>
                <tr>
                  <td align="center">
                    <a href="hole.png">hole.png</a>
                  </td>
                  <td align="center">
                    <a href="mole.png">mole.png</a>
                  </td>
                </tr>
              </table>
              <h2>
                Configuración de los componentes
              </h2>
              <p>
                La interfaz de usuario contendrá un total de 6 ImageSprites: 5 agujeros inmóviles y 1 topo, que se moverá en la parte superior de los agujeros. Utiliza el diseñador de componentes para crear la interfaz de usuario. Cuando hayas terminado, debe ser parecido a la imagen de abajo. No te preocupes por alinear los agujeros de manera uniforme. Deberás especificar su localización a través de sus propiedades <span class="ButtonText">X</span> e <span class="ButtonText">Y</span>. Las instrucciones adicionales están por debajo de la imagen.
              </p>
              <div class="imagecontainer">
                <img alt="" src="designer1.png" width="546">
              </div>
              <p>
                Crea los siguientes componentes arrastrándolos desde la paleta al visor.
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la Paleta
                      </td>
                      <td class="tbl-header">
                        Como lo nombrarás
                      </td>
                      <td class="tbl-header">
                        Objetivo del Componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Canvas</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                        <span class="ButtonText">GameCanvas</span>
                      </td>
                      <td>
                        El campo de juego
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ImageSprite</span> (5)
                      </td>
                      <td>
                        Animation
                      </td>
                      <td>
                        <span class="ButtonText">Hole1</span>, ..., <span class="ButtonText">Hole5</span>
                      </td>
                      <td>
                        Agujeros para aparecer el topo 
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ImageSprite</span>
                      </td>
                      <td>
                        Animation
                      </td>
                      <td>
                        <span class="ButtonText">Mole</span>
                      </td>
                      <td>
                        El topo
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">HorizontalArrangement</span>
                      </td>
                      <td>
                        ScreenArrangement
                      </td>
                      <td>
                        <span class="ButtonText">ScoreArrangement</span>
                      </td>
                      <td>
                        Para ver la puntuación
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                        <span class="ButtonText">ScoreTextLabel</span>
                      </td>
                      <td>
                        Para mantener "Puntuación:"
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                        <span class="ButtonText">ScoreValueLabel</span>
                      </td>
                      <td>
                        Para mantener la puntuación (número de veces que se alcanza al topo)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Clock</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                        <span class="ButtonText">MoleClock</span>
                      </td>
                      <td>
                        Para controlar el movimiento del topo
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Sound</span>
                      </td>
                      <td>
                        Media
                      </td>
                      <td>
                        <span class="ButtonText">Buzzer</span>
                      </td>
                      <td>
                        Para que vibre cuando se toca el topo
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Haz los siguientes cambios en las propiedades de los componentes:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Componente
                      </td>
                      <td class="tbl-header">
                        Acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Canvas1</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">BackgroundColor</span> a Verde. Cámbia <span class="ButtonText">Width</span> a 320 píxeles. Cámbia <span class="ButtonText">Height</span> a 320 píxeles.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Hole1</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">X</span> a 20 e <span class="ButtonText">Y</span> a 60 (arriba izquierda).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Hole2</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">X</span> a 130 e <span class="ButtonText">Y</span> a 60 (arriba centro).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Hole3</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">X</span> a 240 e <span class="ButtonText">Y</span> a 60 (arriba derecha)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Hole4</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">X</span> a 75 e <span class="ButtonText">Y</span> a 140 (abajo izquierda).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Hole5</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">X</span> a 185 e <span class="ButtonText">Y</span> a 140 (abajo derecha).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Mole</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">Picture</span> a "mole.png". Cámbia <span class="ButtonText">Z</span> a 2 para que el topo aparezca por delante de los otros <span class="ButtonText">ImageSprites</span>, que por defecto tienen valor 1 para <span class="ButtonText">Z</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ScoreTextLabel</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">Text</span> a "Score: ".
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ScoreTextValue</span>
                      </td>
                      <td>
                        Cámbia <span class="ButtonText">Text</span> a "0".
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                No te preocupes ahora por la configuración de la propiedad de <span class="ButtonText">Picture</span> para los agujeros; vamos a establecer la propiedad en el Editor de bloques.
              </p>
              <h2>
                Añadir comportamientos a los componentes
              </h2>He aquí un resumen de lo que necesitamos crear con los bloques:
              <ol>
                <li>Crear variables:
                  <ol>
                    <li>
                      <span class="ButtonText">holes</span>: una lista de los agujeros
                    </li>
                    <li>
                      <span class="ButtonText">currentHole</span>: el agujero del que el topo está saliendo
                    </li>
                  </ol>
                </li>
                <li>Cuando la aplicación se inicia:
                  <ol>
                    <li>Completar la lista de los agujeros.
                    </li>
                    <li>Establecer la propiedad <span class="ButtonText">Picture</span> de cada agujero a "hole.png".
                    </li>
                    <li>Llamar al procedimiento <span class="ButtonText">MoveMole</span> (abajo).
                    </li>
                  </ol>
                </li>
                <li>Crear un procedimiento para <span class="ButtonText">MoveMove</span> para:
                  <ol>
                    <li>Establecer <span class="ButtonText">currentHole</span> a un agujero al azar de la lista <span class="ButtonText">holes</span>.
                    </li>
                    <li>Mover el topo a la ubicación de <span class="ButtonText">currentHole</span>.
                    </li>
                  </ol>
                </li>
                <li>Hacer que <span class="ButtonText">MoleClock</span> llame a <span class="ButtonText">MoveMole</span> cada vez que el temporizador se dispare (cada segundo).
                </li>
                <li>Implementar un controlador que hace lo siguiente cuando el topo se toca:
                  <ol>
                    <li>Agregar uno a la puntuación.
                    </li>
                    <li>Hacer que el teléfono vibre.
                    </li>
                    <li>Llamar a <span class="ButtonText">MoveMole</span>.
                    </li>
                  </ol>
                </li>
              </ol>Para continuar, abre el Editor de bloques.
              <h3>
                Creación de variables
              </h3>Crea las variables <span class="ButtonText">holes</span> y <span class="ButtonText">currentHole</span>. Por ahora, les vamos a dar "falsos" valores iniciales, vamos a establecer sus valores iniciales reales en el controlador de eventos <span class="ButtonText">Screen1.Initialize</span>, que se ejecuta cuando la aplicación se inicia. (Por razones técnicas, los componentes no puede ser referidos en los bloques <span class="ButtonText">def</span>, que se ejecutan antes de que la aplicación se  inicie) Aquí hay una imagen y la lista de los bloques que se necesitan:
              <div class="imagecontainer">
                <img alt="" src="blocks1.png" width="590">
              </div>
              <div class="advtutorial">
                .
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable as</span> (holes)
                      </td>
                      <td>
                        Definition
                      </td>
                      <td>
                        Mantener una lista de los agujeros.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make a list</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        Crear una lista vacía, que se rellena cuando se inicia el programa.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable as</span> (currentHole)
                      </td>
                      <td>
                        Definition
                      </td>
                      <td>
                        Mantener el hoyo actual del topo.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (0)
                      </td>
                      <td>
                        Numbers
                      </td>
                      <td>
                        Proporcionar un valor inicial requerido para <span class="ButtonText">currentHole</span>.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Como siempre, los comentarios (crear bloques con el botón derecho del ratón) se recomienda pero no es obligatorio.
              </p>
              <h3>
                Iniciando la aplicación
              </h3>
              <p>
                El primer evento se produce en cualquier programa en <span class="ButtonText">Screen1.Initialize</span>, por lo que vamos a poner el código de inicio en ese controlador. En concreto, vamos a agregar los componentes de los hoyos a la lista <span class="ButtonText">holes</span>, estableceremos la propiedad <span class="ButtonText">Picture</span> de cada hoyo a la imagen "hole.png", y llamaremos a <span class="ButtonText">MoveMole</span>. Como aún no hemos escrito <span class="ButtonText">MoveMole</span>, vamos a crear un procedimiento vacío con ese nombre, que vamos a llenar más tarde.
              </p>
              <p>
                A continuación hay una imagen y la tabla de los elementos que necesitas crear.  Ten en cuenta que el cajón "Any ImageSprite" (Cualquier ImageSprite) se encuentra bajo la pestaña "Advanced" a la derecha de "Built-In" y "My Blocks" en el Editor de bloques.
              </p>
              <div class="imagecontainer">
                <img alt="" src="blocks2.png" width="559">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Screen1.Initialize</span>
                      </td>
                      <td>
                        Screen1
                      </td>
                      <td>
                        Especificar qué debe ocurrir cuando la aplicación se inicia.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">add items to list</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        Agrega los siguientes valores a ...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">holes</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ... La lista de hoyos:
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">component Hole1</span>
                      </td>
                      <td>
                        Hole1
                      </td>
                      <td>
                        • Agujero de la parte superior izquierda
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">component Hole2</span>
                      </td>
                      <td>
                        Hole2
                      </td>
                      <td>
                        • El agujero central superior
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">component Hole3</span>
                      </td>
                      <td>
                        Hole3
                      </td>
                      <td>
                        • El orificio superior derecho
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">component Hole4</span>
                      </td>
                      <td>
                        Hole4
                      </td>
                      <td>
                        • El orificio inferior izquierdo
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">component Hole5</span>
                      </td>
                      <td>
                        Hole5
                      </td>
                      <td>
                        • El orificio inferior derecho
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">foreach</span>
                      </td>
                      <td>
                        Control
                      </td>
                      <td>
                        Especificar que nos gustaría ...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">name (hole)</span>
                      </td>
                      <td>
                        Definitions
                      </td>
                      <td>
                        ...una variable llamada "hole"...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">holes</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ...a tomar en cada uno de los valores de la lista <span class="ButtonText">holes</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ImageSprite.Picture</span>
                      </td>
                      <td>
                        Any Image Sprite
                      </td>
                      <td>
                        Establecer la propiedad <span class="ButtonText">Picture</span> de...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value hole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ...El <span class="ButtonText">ImageSprite</span> que hace referencia a la variable <span class="ButtonText">hole</span>...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text (hole.png)</span>
                      </td>
                      <td>
                        Text
                      </td>
                      <td>
                        ...a la imagen del hoyo vacío.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">to procedure</span> (MoveMole)
                      </td>
                      <td>
                        Definition
                      </td>
                      <td>
                        Crear un procedimiento, que deben completarse más tarde, para mover el topo.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">MoveMole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        Llamar a <span class="ButtonText">MoveMole</span> para la primera colocación del topo.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Compara el bloque <span class="ButtonText">foreach</span> con los bloques equivalentes que serían necesarios sin él:
              </p>
              <table>
                <tr>
                  <th class="c3">
                    Nuevo
                  </th>
                  <th class="c3">
                    Viejo
                  </th>
                </tr>
                <tr>
                  <td width="450">
                    <img alt="" src="blocks3a.png">
                  </td>
                  <td>
                    <img alt="" src="blocks3b.png">
                  </td>
                </tr>
              </table>
              <p>
                No sólo el conjunto de bloques la izquierda es más corto, es menos repetitivo, evitando que el programador sea semi-inconsciente al copiar y pegar, y es más fácil de modificar, por ejemplo, si el nombre de la imagen ha cambiado.
              </p>
              <h3>
                Moviendo el Topo
              </h3>
              <p>
                Ahora vamos a llenar el cuerpo del procedimiento <span class="ButtonText">MoveMole</span>, que vamos a llamar cuando se inicia el programa, cuando se toca el topo, y cuando nuestro contador de tiempo se dispare cada segundo. Lo que queremos hacer es escoger al azar un hoyo y poner al topo encima del mismo. Aquí hay una imagen y la lista de los nuevos bloques:
              </p>
              <div class="imagecontainer">
                <img alt="" src="blocks4.png" width="501">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set currentHole to</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        Guardar el...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call pick random item</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        ...seleccionado al azar...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">holes</span>
                      </td>
                      <td>
                        My Definition
                      </td>
                      <td>
                        ...hoyo.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call Mole.MoveTo</span>
                      </td>
                      <td>
                        Mole
                      </td>
                      <td>
                        Mueve el topo a la...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ImageSprite.X</span>
                      </td>
                      <td>
                        Advanced/ImageSprite
                      </td>
                      <td>
                        ..coordenada x de...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">currentHole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ...el hoyo elegido...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ImageSprite.Y</span>
                      </td>
                      <td>
                        Advanced/ImageSprite
                      </td>
                      <td>
                        ...y la coordenada y de...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">current Hole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ...el hoyo elegido.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Ahora tenemos que especificar que <span class="ButtonText">MoveMole</span> debe ser llamado cada vez que el temporizador <span class="ButtonText">MoleClock</span> <span class="ButtonText">Timer</span> se dispare. Sólo necesitamos dos bloques para hacerlo:
              </p>
              <div class="imagecontainer">
                <img alt="" src="blocks5.png" width="182">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">MoleClock.Timer</span>
                      </td>
                      <td>
                        MoleClock
                      </td>
                      <td>
                        Cuando el temporizador termina...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call MoveMole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        ...mueve el topo.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <h3>
                Registro de toques
              </h3>
              <p>
                Por último, tenemos que especificar lo que sucede cuando el topo se toca. En concreto, queremos:
              </p>
              <ol>
                <li>Incrementar la puntuación.
                </li>
                <li>Hacer que el teléfono vibre brevemente.
                </li>
                <li>Mover el topo.
                </li>
              </ol>
              <p>
                Es fácil traducir estos a los bloques:
              </p>
              <div class="imagecontainer">
                <img alt="" src="blocks6.png" width="521">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <span class="ButtonText">Mole.Touched</span>
                      </td>
                      <td>
                        Mole
                      </td>
                      <td>
                        Cuando el topo se toca...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ScoreValueLabel.Text to</span>
                      </td>
                      <td>
                        ScoreValueLabel
                      </td>
                      <td>
                        ...actualiza la puntuación visible a...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">+</span>
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        ...el resultado de sumar...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (1)
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        ...1 [y]...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ScoreValueLabel.Text</span>
                      </td>
                      <td>
                        ScoreValueLabel
                      </td>
                      <td>
                        ...la puntuación anterior.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call Buzzer.Vibrate</span>
                      </td>
                      <td>
                        Buzzer
                      </td>
                      <td>
                        Hace que el teléfono vibre...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (100)
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        ...100 milisegundos.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call MoveMole</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        Mueve el topo a una nueva ubicación.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <h2>
                Programa Final
              </h2>
              <div class="imagecontainer">
                <img alt="" src="blocks-final.png" width="943">
              </div>
              <h2>
                Variaciones
              </h2>Estas son algunas de las variaciones es posible que desees poner en práctica:
              <ul>
                <li>Agregar un botón de reinicio para establecer la puntuación a 0.
                </li>
                <li>Hacer la puntuación dependiente no sólo de la cantidad de aciertos, sino también del número de fallos y que el topo escapó.
                </li>
                <li>Aumentar la velocidad del movimiento del topo en el juego, si el jugador lo está haciendo bien y disminuirla si el jugador lo está haciendo mal.
                </li>
                <li>Añadir un segundo topo con un temporizador diferente.
                </li>
              </ul>
              <p>
                Puedes ver la forma de aplicar las dos primeras variaciones en el <a href="../molemash/molemash.html">tutorial original de Mole Mash</a>.
              </p>
              <h2>
                Revisión
              </h2>Estas son algunas de las ideas que se tratan en este tutorial:
              <ul>
                <li>La colocación de componentes en una lista <span class="ButtonText">List</span>.
                </li>
                <li>Realizar una operación en cada componente en <span class="ButtonText">List</span> (una lista) utilizando el bloque <span class="ButtonText">foreach</span> y características avanzadas.
                </li>
                <li>Colocar un <span class="ButtonText">ImageSprite</span> encima de otro, utilizando su propiedad <span class="ButtonText">Z</span> para controlar que va delante.
                </li>
                <li>El uso del componente <span class="ButtonText">Clock</span> (reloj) para controlar el juego.
                </li>
                <li>Creación de un procedimiento y llamarlo desde múltiples lugares.
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c4" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
